<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item :label="$t('readed')">
        <el-select
          v-model="readed"
          @change="pageGetUserNotice"
        >
          <el-option
            v-for="item in readedList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="pageGetUserNotice">{{ $t('search') }}</el-button>
      </el-form-item>
    </el-form>
    <div v-for="item in userNoticeList" :key="item">
      <div
        style="margin-bottom: 13px;min-height: 65px;background:#efefef;border-radius: 8px;padding: 10px;color: #7e8c8d "
        @click="showNotice(item)"
      >
        <div style="font-size: 14px">
          <span>{{ '[' + $t('title') + ']' + item.title }}</span>
          <span style="float: right">{{ formatDate(item.publicDate) }}</span>
        </div>
        <div style="font-size: 14px;margin-top: 5px">{{ $t('summary') + ':' + item.summary }}</div>
      </div>
    </div>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :title="notice.title"
      :visible.sync="dialogNoticeVisible"
      width="800px"
    >
      <div style="position: relative">
        <span style="height: 300px" v-html="notice.msg"/>
        <div style="margin-top: 20px;display: flex;justify-content: flex-end">
          <el-button
            style="margin-right: 10px"
            type="text"
            @click="showQrCode(notice.url)"
          >{{ $t('qrCode') }}
          </el-button>
          <el-link
            v-if="notice.url"
            style="margin-right: 10px"
            :href="notice.url"
            type="primary"
            target="_blank"
          >{{ $t('url') }}
          </el-link>
          <div style="line-height: 28px">
            {{ $t('publicDate') }}:{{ formatDate(notice.publicDate) }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('qrCode')"
      :visible.sync="dialogQrCodeVisible"
      destroy-on-close
      width="300px"
    >
      <div ref="qrCodeDiv" style="width:300px;margin: 0 auto"/>
    </el-dialog>

  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { pageGetUserNotice } from '@/api/common/commonUserNoticeApi'
import { formatDate } from '@/util/common'
import { getCompanyId, getLanguage, getPageSize, getUserId, setPageSize } from '@/util/storage'
import { getUserNoticeContentDetails } from '@/api/common/commonUserNoticeContentApi'

export default {
  name: 'UserNotice',
  data() {
    return {
      userNoticeList: [],
      notice: {},
      dialogNoticeVisible: false,
      userId: getUserId(),
      readed: null,
      readedList: [{
        label: this.$t('all'),
        value: null
      }, {
        label: this.$t('readed'),
        value: true
      }, {
        label: this.$t('unread'),
        value: false
      }],
      pageSize: getPageSize(),
      currentPage: 0,
      total: 0,
      dialogQrCodeVisible: false,
      companyId: getCompanyId(),
      language: getLanguage()
    }
  },
  created() {
    this.pageGetUserNotice()
  },
  methods: {
    showQrCode(url) {
      this.dialogQrCodeVisible = true
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: url,
          width: 250,
          height: 250,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
      })
    },
    showNotice(item) {
      getUserNoticeContentDetails({
        noticeId: item.noticeId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.notice = data
          this.dialogNoticeVisible = true
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetUserNotice()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetUserNotice()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    pageGetUserNotice() {
      pageGetUserNotice({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        userId: this.userId,
        readed: this.readed,
        language: this.language
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const userNoticeList = data.data
          userNoticeList.forEach(userNotice => {
            userNotice.publicDate = userNotice.createdDate
          })
          this.userNoticeList = userNoticeList
        }
      })
    }
  }
}
</script>


